import { memo, useCallback, useState } from 'react'

type Props = {
  click: () => void
}

const Child = memo(({ click }: Props) => {
  console.log('---Child---子组件更新了---')
  return (
    <div style={{ backgroundColor: 'skyblue', padding: 5 }}>
      子组件：<button onClick={click}>点击</button>
    </div>
  )
})

export default function UseCallBack () {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')

  const handleClick = useCallback(() => {
    console.log('handleClick---函数执行了---')
    setCount(count + 10)
  }, [count])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child click={handleClick} />
    </div>
  )
}
